<script setup>
import { ref } from "vue";
import { useWindowSize } from '@vant/use';
import { areaList } from '@vant/area-data';
import { Rate } from 'vant';
const onClickLeft = () => {
history.go(-1);
};
/*分享*/
const showShare = ref(false);
    const options = [
      { name: '微信', icon: 'src/assets/info/wei.png'},
      { name: '微博', icon: 'src/assets/info/weibo.png' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];
const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };
const active = ref(0);
const value = ref(3);
/*优惠卷*/
const coupon = {
      available: 1,
      condition: '每满1000可用',
      reason: '',
      value: 150,
      name: '【品质生活节】美的智慧家',
      startAt:1678104000,
      endAt: 1680104000,
      valueDesc: '50',
      unitDesc: '￥',
    };
const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);
const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
const onExchange = (code) => {
      coupons.value.push(coupon);
    };
/**底部弹出 */
const show = ref(false);
const showjifen = ref(false);
const showhuiyuanfangxingou = ref(false);
const showpinglun = ref(false);
//窗口    
const { width, height } = useWindowSize();
</script>

<template>
  <!--标题-->
<van-sticky>
    <van-nav-bar left-arrow  @click-left="onClickLeft">
      <template #right>
        <van-icon name="https://s1.chu0.com/src/img/png/75/757292387850417db097dc204ef100e6.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:rkC-W3qQpYlSB4dvXxwxmYhXh0o=" 
        size="18" @click="showShare = true"/>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect"/>  
      </template>
      <template #title scrollspy sticky>
        <van-tabs v-model:active="active" title-active-color="#0092D8" title-inactive-color="#333333" >
          <van-tab title="商品"></van-tab>
          <van-tab title="评价"></van-tab>
          <van-tab title="推荐"></van-tab>
          <van-tab title="详细"></van-tab>
        </van-tabs>
     </template>
     <template #left>
    <van-icon name="arrow-left" size="20" color="#333"/>
  </template>
    </van-nav-bar>
</van-sticky>
<div class="main">
<!---上半-->
<div style="background-color: #fff;">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
    <van-image src="https://pic.mdcdn.cn/pc/pic/202302/aae94250ea34209385b7275a1ee950d4.jpg"/>
  </van-swipe-item>
<van-swipe-item>
  <van-image src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035211238.jpg"/>
</van-swipe-item>
<template #indicator="{ active, total }">
    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
  </template>
</van-swipe>

<!---价格-->
<div style="overflow: hidden;position: relative;height: 52px;">   
  <div style="float: left; margin-top: 7px;font-size: 12px;font-weight: bold;color: #f60;">¥
  <span style="font-size: 24px;line-height: 19px;">8999</span>
  </div>
  <div style="float: right;margin-right: 15px; text-align: center;">
    <van-icon name="like" />
    <p style="line-height: 16px;font-size: 10px;color: #999;">收藏</p>
  </div>
</div>
<!--会员-->
<div style="box-sizing: border-box;
    min-height: 32px;
    font-size: 12px;
    background: #fff;
    padding: 7px 12px;
    margin: 0 16px 8px 16px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(156deg, #272a30 0%, #202227 100%);
    color: #ffe7b9;">
<div style="box-sizing: border-box;
    float: left;
    width: 100%;
    padding-right: 70px;">
<p style="margin: 0;
    padding: 0;
    vertical-align: baseline;">
PRO会员，享10倍积分，每月领好礼
</p>
</div>
<a href="#" style="position: absolute; right: 10px;color: #ffe7b9;text-decoration: none;">
  立即开通&nbsp;></a>
</div>
<!--商品介绍-->
<div class="prointrou">
  <van-tag mark type="primary" color="#FF66001A" text-color="#FF6600">热买</van-tag>
<div>
<van-tag mark type="primary" color="#0092D81A" text-color="#0092D8">自营</van-tag>
 美的商用中央空调一拖一嵌入式5匹天花机冷暖新能效380V RFD-120QW/SDN8Y-D(D3)      
</div>
<div class="protitle">
 5匹大风量；6年包修；时尚外观；360度环绕送风；无级送风；热干燥清洁；24小时定时；强劲抽湿
</div>
</div>
<!-- 宫格 -->
<div class="GongGe">
  <ul>
    <li>
      <div class="property_item">
        <img class="property_img" src="https://pic.midea.cn/CategoryIcon/30/icon_30_128.png">
        <p class="property_name">冷暖</p>
        <p class="property_desc"> 冷暖类型</p>
      </div>
    </li>
    <li>
      <div class="property_item">
        <img class="property_img" src="https://pic.midea.cn/CategoryIcon/30/icon_30_129.png">
        <p class="property_name">变频</p>
        <p class="property_desc">空调技术</p>
      </div>
    </li>
    <li>
      <div class="property_item">
        <img class="property_img" src="https://pic.midea.cn/CategoryIcon/30/icon_30_130.png">
        <p class="property_name">一级</p>
        <p class="property_desc">能效等级</p>
      </div>
    </li>
    <li>
      <div class="property_item">
        <img class="property_img" src="https://pic.midea.cn/CategoryIcon/30/icon_30_139.png">
        <p class="property_name">1.5匹</p>
        <p class="property_desc">空调匹数</p>
      </div>        
    </li>
    <li>
      <div class="property_item">
        <img class="property_img" src="https://pic.midea.cn/CategoryIcon/30/icon_30_140.png">
        <p class="property_name">15-23</p>
        <p class="property_desc">面积（m2）</p>
      </div>  
    </li>
  </ul>
</div>
</div>
<!---积分-->
<div style="background-color: #fff; ">
  <van-cell value="查看" is-link @click="showjifen = true">
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <van-icon name="point-gift-o" size="24px" color="#FF6600"/>
    <span class="custom-title" style="color: #333333">预计最高得</span>
    <span class="custom-title" style="color: #FF6600;font-size: ;">889积分</span>
  </template>
</van-cell>
</div>
<van-popup v-model:show="showjifen"  round position="bottom" :style="{ height: '750px' }" closeable close-icon="close" >
  <div style="text-align: center;margin-top: 15px;font-size: 16px; color: #333333;font-weight:bold;">积分优惠</div>
  <div style="margin-left: 17px;font-size: 14px;margin-top: 20px; color: #333333;font-weight:bold;">购物积分</div>
  <div style="margin-left: 17px;font-size: 12px; color: #333333;margin-top: 10px;">预计最高得
    <span style="font-size: 12px; color: #FF6600;">89积分</span>
  </div>
  <div style="margin-left: 17px;font-size: 12px; color: #333333;margin-top: 10px;">
    <span>已有积分：
      <span>20</span>
    </span>,
    <span>最多可抵现：¥
      <span>0</span>
    </span>
  </div>
  <van-button type="primary"  color="#0092D8" block round style=" line-height: 60px;position: absolute;bottom: 0;left: 0;" @click="showjifen = false">关闭</van-button>
</van-popup>


<!---会员放心购-->
<div style="background-color: #fff; margin-top: 10px;" @click="showhuiyuanfangxingou = true">
  <van-cell value="查看更多" is-link >
  <template #title>
    <div style="font-weight:bold ;"> 会员放心购</div>
  </template>
  <template #icon>
    <van-icon name="src/assets/info/dun.png" size="20"/>
  </template>
</van-cell>
<van-row>
  <van-col span="4" offset="1">
    <div style="font-size: 5px;"><van-icon name="passed"  color="#267AFF" size="8"/>全国联保</div></van-col>
  <van-col span="4" offset="1">
    <div style="font-size: 5px;"><van-icon name="passed"  color="#267AFF" size="8"/>全场包邮</div></van-col>
  <van-col span="7" offset="1">
    <div style="font-size: 5px;"><van-icon name="passed"  color="#267AFF" size="8"/>7天无理由退换货</div></van-col>
</van-row>
<van-row>
  <van-col span="4" offset="1"><div style="font-size: 5px;"><van-icon name="passed"  color="#267AFF" size="8"/>极速保价</div></van-col>
  <van-col span="4" offset="1"><div style="font-size: 5px;"><van-icon name="passed"  color="#267AFF" size="8"/>延保服务</div></van-col>
</van-row>
&nbsp;
</div>
<van-popup v-model:show="showhuiyuanfangxingou"  round position="bottom" :style="{ height: '750px' }" closeable close-icon="close" >
  <div style="text-align: center;margin-top: 15px;font-size: 16px; color: #333333;font-weight:bold;">
    <van-icon name="src/assets/info/dun.png" size="20"/>&nbsp;会员放心购
  </div>
 <div style="margin-left: 17px;font-size: 14px;margin-top: 20px; color: #333333;">
  <div style="margin-top:20px;font-weight:bold;">基础服务</div>
  <div style="margin-top:20px;display: flex;">
    <van-icon name="src/assets/info/bao.png" size="18" style="text-align: center;"/>
    <div style="margin-left: 15px;font-size: 12px;">
      <div>全国联保</div>
     <div style="color:#999999;">美的集团官方商城，商品保修期内可支持全国联保</div>
    </div>
  </div>
  <div style="margin-top:20px;display: flex;">
    <van-icon name="src/assets/info/you.png" size="18"/>
    <div style="margin-left: 15px;font-size: 12px;">
     <div>全场包邮</div>
     <div style="color:#999999;">全场商品购买时享受包邮服务</div>
    </div>
  </div>
  <div style="margin-top:20px;display: flex;">
    <van-icon name="src/assets/info/tui.png" size="18"/>
    <div style="margin-left: 15px;font-size: 12px;">
      <div>7天无理由退换货（生鲜水果除外）</div>
     <div style="color:#999999;">签收后7日内不影响二次销售，可无理由退换货</div>
    </div>
  </div>
  <div style="margin-top:40px;font-weight:bold;">升级服务</div>
  <div style="margin-top:20px;display: flex;">
    <van-icon name="src/assets/info/yan2.png" size="18"/>
    <div style="margin-left: 15px;font-size: 12px;">
      <div>延保服务</div>
     <div style="color:#999999;">可购买美的原厂延保，享受家电原厂的保修服务</div>
    </div>
  </div>
  <div style="margin-top:40px;font-weight:bold;color:#999999;">PRO会员专享服务</div>
  <div style="margin-top:20px;display: flex;">
    <van-icon name="src/assets/info/yan1.png" size="18"/>
    <div style="margin-left: 15px;font-size: 12px;color:#999999;">
      <div>免费延保</div>
     <div style="color:#999999;">PRO会员每年可领取1次免费1年延保服务</div>
    </div>
  </div>
 </div>
  <van-button type="primary" block round color="#0092D8" style=" line-height: 60px;position: absolute;bottom: 0;left: 0;" @click="showhuiyuanfangxingou = false">关闭</van-button>
</van-popup>



<!---优惠卷-->
<div style="background-color: #fff; margin-top: 10px;">
  <!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
  title="活动"
  style="font-weight:bold ;"
>
</van-coupon-cell>
<!-- 优惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
</div>
<div style="background-color: #fff; margin-top: 10px;">
  <!--地址弹出-->
<van-cell is-link  @click="show = true">
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span style="color: #333333;font-weight:bold;font-size: 14px;">送至</span>&nbsp;&nbsp;&nbsp;
    <span style="color: #333333;font-size: 14px;line-height: 20px;">广州省广州市天河区</span>
    <div style="color: #0092d8;font-size: 12px;line-height: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送至</div>
  </template>
</van-cell>
<van-popup v-model:show="show"  round
  position="bottom"
  :style="{ height: '40%' }" >
  <van-area  :area-list="areaList" value="110101"  @cancel="show = false"/>
</van-popup>
</div>
<!--会员-->
<div style="background-color: #fff; margin-top: 10px;">
<van-cell is-link value="进店看看" to="bingxian">
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
  <template #icon>
    <van-icon name="//pic.midea.cn/h5/pic/202205/700565ae7673.png" size="40px"/>
  </template>
  <template #title>
    <span style="font-size:14px;">智慧家空调会员店</span>
    <div style="font-size:14px;">店铺会员：545</div>
  </template>
</van-cell>
</div>








<!---评价-->
<div style="background-color: #fff; margin-top: 10px;" @click="showpinglun = true">
  <van-cell is-link value="查看全部" >
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span style="color: #333333;font-weight:bold;font-size: 14px;">会员评价(3)</span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">
      <span style="color: #333333;font-weight:bold;font-size: 14px;">
      <van-icon name="src/assets/info/people.png" size="25"/>&nbsp;韩*平<van-icon name="src/assets/info/huiyuan.png" size="15"/>
    </span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">满意</div>
  </div>
  </template>
</van-cell> 
  </div>
</div>
<van-popup v-model:show="showpinglun" position="right" :style="{ height: '100%',width:'100%' }" style=" background-color: #ededed;">
  <van-nav-bar
  @click-left="showpinglun=false"
>
<template #title>
    <div style="color: #666666;font-size: 14px;font-weight:400">商品评价</div>
  </template>
  <template #left>
    <van-icon name="arrow-left" size="20" color="#333"/>
  </template>
</van-nav-bar>
<div style="background-color: #fff;height: 80px;">
  <div style="margin-left: 17px;font-size: 14px; color: #333333;">
  <div style="font-weight:bold;">总体评分</div>
  <van-rate v-model="value"  color="#0092D8" style="margin-top:10px;"/>
</div>
</div>
<van-cell style="margin-top: 10px;" >
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span style="color: #333333;font-weight:bold;font-size: 14px;">
      <van-icon name="src/assets/info/people.png" size="25"/>&nbsp;韩*平<van-icon name="src/assets/info/huiyuan.png" size="15"/>
    </span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">满意</div>
  </template>
  <template #value>
    2023-03-05
  </template>
  <template #label>
    <div>
      <span style="color: #333333;font-weight:bold;font-size: 14px;"><van-icon name="chat-o" />官方评论</span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">祝您生活愉快~</div>
  </div>
  </template>
</van-cell> 
<van-cell style="margin-top: 10px;" >
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span style="color: #333333;font-weight:bold;font-size: 14px;">
      <van-icon name="src/assets/info/people.png" size="25"/>&nbsp;陈*龙<van-icon name="src/assets/info/huiyan2.png" size="15"/>
    </span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">收到了很开心,很好吃</div>
  </template>
  <template #value>
    2023-03-04
  </template>
</van-cell> 

<van-cell style="margin-top: 10px;" >
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span style="color: #333333;font-weight:bold;font-size: 14px;">
      <van-icon name="src/assets/info/people.png" size="25"/>&nbsp;覃*明<van-icon name="src/assets/info/huiyan3.png" size="15"/>
    </span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">空调漏水</div>
  </template>
  <template #value>
    2023-03-08
  </template>
  <template #label>
    <div>
      <span style="color: #333333;font-weight:bold;font-size: 14px;"><van-icon name="chat-o" />官方评论</span>
    <div style="font-size: 12px;line-height: 18px;margin-top: 10px;">漏水你可以退货</div>
  </div>
  </template>
</van-cell> 
<van-sticky :offset-bottom="50" position="bottom">
  <van-action-bar>
  <van-action-bar-icon icon="wap-home-o" text="首页" size="22"/>
  <van-action-bar-icon icon="chat-o" text="客服" size="22" />
  <van-action-bar-icon icon="cart-o" text="购物车" size="22"/>
  &nbsp;
  &nbsp;
  
  <van-button round type="success" text="&nbsp;加入购物车&nbsp;"  color="#0092D8"/>&nbsp;
  <van-button round type="success" text=" &nbsp; &nbsp;立即购买&nbsp;&nbsp;"  color="#FF6600"/>
</van-action-bar>
</van-sticky>
</van-popup>










<!---下-->
<van-tabs v-model:active="active" title-active-color="#0092D8" line-width="0" style="margin-bottom: 40px;">
<van-tab title="详细">
  <van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035168237.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035132342.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035135200.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/><van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035237996.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035148390.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035236858.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035169039.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035233587.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="445"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035224350.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="305"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035145785.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="414"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035151142.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<van-image
  width="390"
  height="219"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20230105/01501dadb6f64235972a0f25a250b5b4.jpg?x-oss-process=image/resize,limit_0,w_790/quality,Q_50"
/>
<div style="padding: 17px 25px 20px 25px; font-size: 10px;background-color: #fff;">
<p class="marking1">划线价格：</p>
<p class="marking2">指商品专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供參考。</p>
<p class="marking1">未划线价格：</p>
<p class="marking2">指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</p>
<p class="marking2">商家详情页（含主图）以图片成文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格.具体请以结算页面的标价、优惠条件或活动规则为准。</p>
<p class="marking2">此说明仅当出现价格比较时有效，如有疑问，您可在购买前联系客服进行咨询。</p>
</div>
</van-tab>
<van-tab title="产品参数">
<div style="display: block; font-size: 14px;line-height: 1.5;color: #666;padding: 0 16px;">
<div>
<div class="spec">
<h4>产品信息</h4>
<table class="table"><tbody>
  <tr><th>品牌</th><td>Midea/美的</td></tr>
  <tr><th>颜色</th><td>白色</td></tr>                       
  <tr><th>产品型号</th><td>RFD-120QW/SDN8Y-D(D3)</td></tr>
  <tr><th>电源电压（V）</th><td>380V</td></tr>
  <tr><th>额定功率（W）</th><td>50</td></tr>
</tbody></table>
</div>
<div class="spec">
<h4>类目信息</h4>
<table class="table"><tbody>
<tr><th>冷媒类型</th><td>R32</td></tr>
<tr><th>额定制冷量</th><td>12400</td></tr>
<tr><th>系列</th><td>工程机</td></tr>
<tr><th>空调类型</th><td>嵌入式</td></tr>
<tr><th>冷暖类型</th><td>冷暖</td></tr>
<tr><th>空调技术</th><td>定速</td></tr>
<tr><th>能效等级</th><td>三级</td></tr>
<tr><th>空调匹数</th><td>5匹</td></tr>
<tr><th>制冷适用面积（m2）</th><td>54~80</td></tr>
</tbody></table>
</div>
<div class="spec">
<h4>包装信息</h4>
<table class="table"><tbody>
  <tr><th>产品尺寸(mm)：</th><td>长830x宽830x高287</td></tr>
  <tr><th>产品净重(kg)：</th><td>126</td></tr>
  <tr><th>包装清单：</th><td>室内机*1件、室外机*1件、遥控器*1件、7号电池*2件、排水管*1件、使用说明书*1件、连接管*1件、包扎带*1件、保温管*1件</td></tr>
</tbody></table>
</div>      
</div>
</div>

</van-tab>
<van-tab title="服务支持">  
  <div style="font-size: 14px;
    font-family: Helvetica,sans-serif;
    color: #afafaf;
    word-break: break-all;
    overflow: hidden;">
     <p>1、大家电商品（空调、冰箱、洗衣机、烟机、消毒柜、热水器等）采用安得物流、百世物流、顺丰物流等发货。商家订单会自动流转到仓库，系统不支持修改地址，下单前请务必核对好地址，大电家体积较大，建议配送选择安装地址。（<span style="color:#FF0000">如因地址错误退货，需买家承担相应物流退回运费</span>）<br>
2、无质量问题的商品因客户原因逾期不收货，自动退回运费由客户承担。</p></div>

</van-tab>
</van-tabs>

 <!--下导航-->
<van-sticky :offset-bottom="50" position="bottom">
  <van-action-bar>
  <van-action-bar-icon icon="wap-home-o" text="首页" size="22"/>
  <van-action-bar-icon icon="chat-o" text="客服" size="22" />
  <van-action-bar-icon icon="cart-o" text="购物车" size="22"/>
  &nbsp;
  &nbsp;
  
  <van-button round type="success" text="&nbsp;加入购物车&nbsp;"  color="#0092D8"/>&nbsp;
  <van-button round type="success" text=" &nbsp; &nbsp;立即购买&nbsp;&nbsp;"  color="#FF6600"/>
</van-action-bar>
</van-sticky>

</template>

<style lang="less" scoped>
//轮播图
.custom-indicator {
    position: absolute;
    right: 15px;
    bottom: 5px;
    width: 25px;
    padding: 2px 5px;
    font-size: 12px;
    background: #00000066;
    color: #FFFFFF;
    margin-bottom: 15px;
    border-radius:30px 30px 30px 30px;
  }
//商品介绍
.prointrou{
  margin-top:8px;
 margin-left:18px;
 margin-right:30px;
}
.protitle{
  font-size: 12px;
    line-height: 18px;
    color: #999;
    overflow: hidden;
    margin: -3px 0;
    word-break: break-all;
    margin-top: 8px;
}
    // 宫格
.GongGe {
    width: 390px;
    height: 82px;
    overflow-x:scroll;
    margin-top: 18px;
    margin-bottom:10px;
    -ms-overflow-style: none;
    ul {
      width: 440px;
      display: flex;
      flex-direction: row;
      -ms-overflow-style: none;
      li {
         overflow-x: hidden;
        overflow: hidden;
        width: 88px;
        height: 72px;
      }
    }
}
.property_item {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    flex-basis: 88px;
    min-width: 0;
    padding: 0 2px;
    text-align: center;
    margin-left: 20px;
}
.property_img {
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
}
.property_name {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 0%;
}
.property_desc {
  margin-top: 0%;
    padding-bottom: 2px;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
  // 主
.main{
    width:390px;
    background-color: #ededed;
}

 .marking1{
  position: relative;
    height: 10px;
    line-height: 10px;
    padding-left: 5px;
    margin-bottom: 6px;
    font-weight: bold;
    color: #000;
    vertical-align: baseline;
 }
 .marking2{
  padding-left: 5px;
  margin-bottom: 15px;
  color: #999;}
  .spec{padding: 0 0 15px 0;}
  .table {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
}
</style>

<style>
:-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
</style>